import { memo, useCallback, useState } from "react"

const Input = memo(function Input({ onChange }) {
    console.log("子组件重新渲染了")
    return <input type="text" onChange={(e) => { onChange(e.target.value) }}></input>
})

const practice2 = () => {
    // 传给子组件的函数 useCallback缓存函数 不重新渲染子组件
    const changeHandler = useCallback((value) => {
        console.log(value)
    }, [])
    // 触发父组件重新渲染的函数
    const [count, setCount] = useState(0)
    return (
        <div>
            <div>memo</div>
            {/* 把函数作为prop传给子组件 */}
            <Input onChange={changeHandler} />
            <button onClick={() => setCount(count + 1)}>{count}</button>
        </div>
    )
}

export default practice2